<div class="container-fluid asset-details">
  <div class="row head-row">
    <div class="col-12">
      <img class="logo" src="../../assets/images/icon.png">
      <h1>
        <i class="back-button fa fa-arrow-circle-left" aria-hidden="true" (click)="onBackClick()"></i>
        {{this.assetName}}
      </h1>
    </div>

  </div>
  <div class="row ">
    <div class="col-6">
      <div class="chart-wrapper">
        <div class="sub-title">Asset Temperature</div>

        <div id="chart">
          <div id="highcharts-container"></div>
        </div>
      </div>
      <div class="map-wrapper">
        <div class="sub-title">Asset Location</div>
        <div id="map"></div>
      </div>
    </div>
    <div class="col-6 data-col">
      <div class="row">
        <div class="col-6">
          <div class="asset-stat">
            <strong>Sensor Type:</strong> Temperature
          </div>
          <div class="asset-stat">
            <strong>Range Max:</strong> 80°
          </div>
          <div class="asset-stat">
            <strong>Due Date:</strong> 11/20/17 6:00 CST
          </div>
        </div>
        <div class="col-6">
          <div class="asset-stat">
            <strong>Sensor ID:</strong> 123456890
          </div>
          <div class="asset-stat">
            <strong>Range Min:</strong> 30°
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <mat-table #table [dataSource]="dataSource" matSort>

            <!-- Time Column -->
            <ng-container matColumnDef="timeStamp">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Time </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.timeStamp * 1000 | date: 'MMM dd, HH:mm'}} </mat-cell>
            </ng-container>


            <!-- Temperature Column -->
            <ng-container matColumnDef="temperature">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Temp </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.temperature}}° </mat-cell>
            </ng-container>

            <!-- Latitude Column -->
            <ng-container matColumnDef="lat">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Lat </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.lat | number}} </mat-cell>
            </ng-container>

            <!-- Longitude Column -->
            <ng-container matColumnDef="long">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Long </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.long | number}} </mat-cell>
            </ng-container>

            <!-- Range Error Column -->
            <ng-container matColumnDef="rangeError">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Range Error </mat-header-cell>
              <mat-cell *matCellDef="let element"><span ngClass="{{element.rangeError ? 'range-active': ''}}">{{element.rangeError ?  'Yes' : 'No'}}</span></mat-cell>
            </ng-container>

            <!-- Block Column -->
            <ng-container matColumnDef="block">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Block </mat-header-cell>
              <mat-cell *matCellDef="let element"> <span class="view-link" (click)="showData(element)">View</span> </mat-cell>
            </ng-container>

            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
          </mat-table>
        </div>
      </div>

    </div>
  </div>
</div>
<div *ngIf="showPopover" class="data-popup">
  <div class="block-data row">
    <div class=" col-11">
      <h4>Block Data</h4>
    </div>
    <div class="close-modal col-1" (click)="hidePopover()">
      <i class="fa fa-window-close" aria-hidden="true"></i>
    </div>
  </div>
  <pre>{{data | json}}</pre>
</div>
